<template>
  <trends_part :item="info" :isliked="isliked" :flag="flag" :title="title" :plArr="plArr" @stop="stop" @love="love" @message="message" @ok="ok" />
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue'
import { getFollowedAPI, gettriggerLikeAPI, getVideoCommentAPI, postcommentVideo } from '../api/Followed-page'
// 动态公共组件
import trends_part from '../components/common/trends-part.vue'
// 我的id
const myId = JSON.parse(localStorage.getItem('data')).userId
// 数据源
const info = ref([])

const isliked = ref([])
const flag = ref(false)
const title = ref('')
// 评论数组
const plArr = ref([])
const videoId = ref('')

init()
async function init() {
  let res = await getFollowedAPI(myId)
  info.value = res.data.data
  console.log(info.value, '视频');
  info.value.forEach((item) => {
    axios.get(`api/user/${myId}/isLiked/${item.Video.videoId}`).then((res) => {
      isliked.value.push(res.data.data)
      item.loveFlag = res.data.data
    })
  })
  console.log(info.value, '视频和是否点赞集合');
}

// 点击停止或者播放
async function stop(index, videoDom) {
  console.log(videoDom[index].paused);
  // 如果是暂停
  if (videoDom[index].paused) {
    for (let i = 0; i < videoDom.length; i++) {
      videoDom[i].pause()
      videoDom[i].muted = true
    }
    videoDom[index].play()
    // 关闭静音
    videoDom[index].muted = false
    // 如果是开始
  } else {
    videoDom[index].pause()
    // 打开静音
    videoDom[index].muted = true
  }
}

// 爱心
async function love(val) {
  let res = await gettriggerLikeAPI(myId, val)
  console.log(res);
  Timeout(res.data.data)
  info.value.forEach((item) => {
    if (item.Video.videoId === val) {
      item.loveFlag = !item.loveFlag
      if (item.loveFlag) {
        item.WSLCNum.likeNum++
      } else {
        item.WSLCNum.likeNum--
      }
    }
  })
}

// Message组件简便方法
function Timeout(t) {
  flag.value = true
  title.value = t + '~'
  setTimeout(() => {
    flag.value = false
    title.value = ''
  }, 1000)
}

// 消息
async function message(val) {
  videoId.value = val
  let res = await getVideoCommentAPI(val)
  console.log(res, '评论集合');
  plArr.value = res.data.data
}

// 点击上传评论
async function ok(params) {
  let userId = JSON.parse(localStorage.getItem('data')).userId
  let res = await postcommentVideo({
    'content': params.inputValue,
    // 回复评论的id
    'replyId': params.commentIdval || '',
    // 谁发布的id
    'fromUserId': userId,
    'toVideoId': videoId.value
  })
  console.log(res);
  if (res.data.code === 200) {
    Timeout('评论成功！')
    let result = await getVideoCommentAPI(videoId.value)
    console.log(result.data.data);
    if (result.data.code === 200) {
      plArr.value = result.data.data
    }
  } else {
    Timeout('评论失败！')
  }
}

</script>

<style lang="scss" scoped>
.all {
  height: 96%;
  width: 96%;
  overflow: scroll;
  font-size: 14px;
  color: #fff;
  padding: 2%;

  &::-webkit-scrollbar {
    display: none;
  }
}

.messagenumber,
.sharenumber {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 140px;
  margin-top: 15px;
  font-size: 12px;
  color: #fff;
  z-index: 5;
}

.sharenumber {
  margin-left: 240px;
}

.followed {
  position: relative;
  margin-bottom: 20px;

  .top {
    height: 33px;
    width: 100%;
    display: flex;
    align-items: center;

    img {
      width: 30px;
      height: 30px;
    }

    span {
      margin-left: 8px;
    }
  }

  p {
    height: 14px;
    margin-bottom: 10px;
  }

  video {
    width: 259px;
    height: 400px;
  }

}
</style>